<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>海外购商城 - 跨境进口电商</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .glass-effect {
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .product-card-hover {
            transition: all 0.3s ease;
        }
        .product-card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .country-flag {
            width: 24px;
            height: 18px;
            border-radius: 3px;
            object-fit: cover;
        }
        .category-badge {
            transition: all 0.2s ease;
        }
        .category-badge:hover {
            transform: scale(1.05);
        }
        .dark-mode {
            background-color: #1a1a1a;
            color: #ffffff;
        }
        .dark-mode .glass-effect {
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .dark-mode .bg-white {
            background-color: #2d2d2d;
        }
        .dark-mode .text-gray-900 {
            color: #ffffff;
        }
        .dark-mode .text-gray-600 {
            color: #d1d5db;
        }
        .dark-mode .border-gray-200 {
            border-color: #4b5563;
        }
        .dark-mode .bg-gray-50 {
            background-color: #374151;
        }
        
        /* 微交互动画 */
        .btn-bounce {
            transition: all 0.2s ease;
        }
        .btn-bounce:hover {
            transform: scale(1.05);
        }
        .btn-bounce:active {
            transform: scale(0.95);
        }
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .pulse-glow {
            animation: pulseGlow 2s ease-in-out infinite;
        }
        @keyframes pulseGlow {
            0%, 100% {
                box-shadow: 0 0 5px rgba(139, 92, 246, 0.5);
            }
            50% {
                box-shadow: 0 0 20px rgba(139, 92, 246, 0.8);
            }
        }
        .floating-cart {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background: #8b5cf6;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
            transition: all 0.3s ease;
            z-index: 50;
        }
        .floating-cart:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(139, 92, 246, 0.6);
        }
        .floating-cart .cart-count {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ef4444;
            color: white;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
        }
        .hero-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            position: relative;
            overflow: hidden;
        }
        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="white" opacity="0.1"><path d="M0,20 Q250,0 500,20 T1000,20 V100 H0 Z"/></svg>') repeat-x bottom;
            background-size: 1000px 100px;
        }
        .compliance-badge {
            display: inline-flex;
            align-items: center;
            background: #10b981;
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }
        .compliance-badge i {
            margin-right: 4px;
        }
        .live-indicator {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
    </style>
</head>
<body class="bg-gray-50 transition-colors duration-300">
    <!-- 顶部导航栏 -->
    <nav class="bg-white shadow-lg sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <h1 class="text-2xl font-bold text-purple-600">全球购商城</h1>
                    </div>
                    <div class="hidden md:block ml-10">
                        <div class="flex items-baseline space-x-4">
                            <a href="index.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">首页</a>
                            <a href="overseas-live-center.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">直播中心</a>
                            <a href="overseas-shopping.html" class="text-purple-600 px-3 py-2 rounded-md text-sm font-medium">海外购商城</a>
                            <a href="shopping-cart/index.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">购物车</a>
                        </div>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <!-- 搜索框 -->
                    <div class="hidden md:block">
                        <div class="relative">
                            <input type="text" placeholder="搜索海外商品..." class="w-64 pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
                            <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                        </div>
                    </div>
                    <!-- 购物车 -->
                    <div class="relative">
                        <button id="cart-btn" class="text-gray-600 hover:text-purple-600 p-2 rounded-full hover:bg-gray-100 btn-bounce pulse-glow">
                            <i class="fas fa-shopping-cart text-xl"></i>
                            <span id="cart-count" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center cart-badge">0</span>
                        </button>
                    </div>
                    <!-- 主题切换 -->
                    <button id="theme-toggle" class="text-gray-600 hover:text-purple-600 p-2 rounded-full hover:bg-gray-100">
                        <i class="fas fa-moon text-xl"></i>
                    </button>
                    <!-- 用户头像 -->
                    <div class="relative">
                        <button class="flex items-center space-x-2 text-gray-700 hover:text-purple-600">
                            <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="用户头像">
                            <span class="hidden md:block text-sm font-medium">用户</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-section text-white py-16 relative">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="text-center">
                <h1 class="text-4xl md:text-6xl font-bold mb-6">全球正品 直邮到家</h1>
                <p class="text-xl mb-8 opacity-90">100%海外原装进口 · 海关监管 · 正品保障</p>
                <div class="flex flex-wrap justify-center gap-4 mb-8">
                    <div class="glass-effect px-4 py-2 rounded-full">
                        <i class="fas fa-shield-alt mr-2"></i>正品保障
                    </div>
                    <div class="glass-effect px-4 py-2 rounded-full">
                        <i class="fas fa-shipping-fast mr-2"></i>海外直邮
                    </div>
                    <div class="glass-effect px-4 py-2 rounded-full">
                        <i class="fas fa-file-contract mr-2"></i>合规清关
                    </div>
                    <div class="glass-effect px-4 py-2 rounded-full">
                        <i class="fas fa-yen-sign mr-2"></i>价格透明
                    </div>
                </div>
                <button class="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors btn-bounce">
                    立即购买海外商品
                </button>
            </div>
        </div>
    </section>

    <!-- 合规政策提示 -->
    <section class="bg-blue-50 border-b border-blue-200 py-4">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-4">
                    <i class="fas fa-info-circle text-blue-600"></i>
                    <div class="text-sm text-blue-800">
                        <span class="font-medium">跨境购买政策提醒：</span>
                        单笔交易限额5000元，年度个人限额26000元，需提供真实身份信息用于海关清关
                    </div>
                </div>
                <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
                    查看详细政策 <i class="fas fa-external-link-alt ml-1"></i>
                </button>
            </div>
        </div>
    </section>

    <!-- 主要内容区域 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
            <!-- 左侧筛选栏 -->
            <div class="lg:col-span-1">
                <!-- 商品分类 -->
                <div class="bg-white rounded-lg shadow-lg p-6 mb-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">商品分类</h3>
                    <div class="space-y-2">
                        <div class="category-badge flex items-center p-2 rounded-lg hover:bg-purple-50 cursor-pointer">
                            <i class="fas fa-venus text-pink-500 mr-3"></i>
                            <span class="text-gray-700">美妆护肤</span>
                            <span class="ml-auto text-xs text-gray-500">1,234</span>
                        </div>
                        <div class="category-badge flex items-center p-2 rounded-lg hover:bg-purple-50 cursor-pointer">
                            <i class="fas fa-baby text-blue-500 mr-3"></i>
                            <span class="text-gray-700">母婴用品</span>
                            <span class="ml-auto text-xs text-gray-500">856</span>
                        </div>
                        <div class="category-badge flex items-center p-2 rounded-lg hover:bg-purple-50 cursor-pointer">
                            <i class="fas fa-pills text-green-500 mr-3"></i>
                            <span class="text-gray-700">保健品</span>
                            <span class="ml-auto text-xs text-gray-500">642</span>
                        </div>
                        <div class="category-badge flex items-center p-2 rounded-lg hover:bg-purple-50 cursor-pointer">
                            <i class="fas fa-tshirt text-purple-500 mr-3"></i>
                            <span class="text-gray-700">服装鞋包</span>
                            <span class="ml-auto text-xs text-gray-500">2,341</span>
                        </div>
                        <div class="category-badge flex items-center p-2 rounded-lg hover:bg-purple-50 cursor-pointer">
                            <i class="fas fa-mobile-alt text-gray-500 mr-3"></i>
                            <span class="text-gray-700">数码电器</span>
                            <span class="ml-auto text-xs text-gray-500">423</span>
                        </div>
                        <div class="category-badge flex items-center p-2 rounded-lg hover:bg-purple-50 cursor-pointer">
                            <i class="fas fa-utensils text-orange-500 mr-3"></i>
                            <span class="text-gray-700">食品饮料</span>
                            <span class="ml-auto text-xs text-gray-500">789</span>
                        </div>
                    </div>
                </div>

                <!-- 国家/地区筛选 -->
                <div class="bg-white rounded-lg shadow-lg p-6 mb-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">国家/地区</h3>
                    <div class="space-y-2">
                        <div class="flex items-center p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                            <img src="https://flagcdn.com/w40/jp.png" alt="日本" class="country-flag mr-3">
                            <span class="text-gray-700">日本</span>
                            <span class="ml-auto text-xs text-gray-500">3,421</span>
                        </div>
                        <div class="flex items-center p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                            <img src="https://flagcdn.com/w40/kr.png" alt="韩国" class="country-flag mr-3">
                            <span class="text-gray-700">韩国</span>
                            <span class="ml-auto text-xs text-gray-500">2,156</span>
                        </div>
                        <div class="flex items-center p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                            <img src="https://flagcdn.com/w40/us.png" alt="美国" class="country-flag mr-3">
                            <span class="text-gray-700">美国</span>
                            <span class="ml-auto text-xs text-gray-500">1,834</span>
                        </div>
                        <div class="flex items-center p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                            <img src="https://flagcdn.com/w40/de.png" alt="德国" class="country-flag mr-3">
                            <span class="text-gray-700">德国</span>
                            <span class="ml-auto text-xs text-gray-500">1,567</span>
                        </div>
                        <div class="flex items-center p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                            <img src="https://flagcdn.com/w40/au.png" alt="澳大利亚" class="country-flag mr-3">
                            <span class="text-gray-700">澳大利亚</span>
                            <span class="ml-auto text-xs text-gray-500">998</span>
                        </div>
                        <div class="flex items-center p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                            <img src="https://flagcdn.com/w40/fr.png" alt="法国" class="country-flag mr-3">
                            <span class="text-gray-700">法国</span>
                            <span class="ml-auto text-xs text-gray-500">756</span>
                        </div>
                    </div>
                </div>

                <!-- 价格区间 -->
                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">价格区间</h3>
                    <div class="space-y-3">
                        <div class="flex items-center">
                            <input type="checkbox" id="price1" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                            <label for="price1" class="ml-2 text-sm text-gray-700">¥0 - ¥200</label>
                        </div>
                        <div class="flex items-center">
                            <input type="checkbox" id="price2" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                            <label for="price2" class="ml-2 text-sm text-gray-700">¥200 - ¥500</label>
                        </div>
                        <div class="flex items-center">
                            <input type="checkbox" id="price3" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                            <label for="price3" class="ml-2 text-sm text-gray-700">¥500 - ¥1000</label>
                        </div>
                        <div class="flex items-center">
                            <input type="checkbox" id="price4" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                            <label for="price4" class="ml-2 text-sm text-gray-700">¥1000 - ¥2000</label>
                        </div>
                        <div class="flex items-center">
                            <input type="checkbox" id="price5" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                            <label for="price5" class="ml-2 text-sm text-gray-700">¥2000以上</label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧商品列表 -->
            <div class="lg:col-span-3">
                <!-- 直播购物入口 -->
                <div class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg p-6 mb-8 text-white">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-xl font-bold mb-2">🔴 正在直播</h3>
                            <p class="opacity-90 mb-4">日本美妆专场直播，限时优惠，海外直邮包税</p>
                            <div class="flex items-center space-x-4 text-sm">
                                <span class="flex items-center">
                                    <div class="live-indicator bg-red-500 h-2 w-2 rounded-full mr-2"></div>
                                    12,345人观看
                                </span>
                                <span>主播：小美</span>
                            </div>
                        </div>
                        <a href="zhibo/index.html" class="bg-white text-purple-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors btn-bounce">
                            进入直播间
                        </a>
                    </div>
                </div>

                <!-- 商品排序和显示选项 -->
                <div class="bg-white rounded-lg shadow-lg p-4 mb-6">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-4">
                            <span class="text-gray-600">共找到 <span class="font-semibold text-gray-900">12,345</span> 件商品</span>
                        </div>
                        <div class="flex items-center space-x-4">
                            <select class="border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500">
                                <option>综合排序</option>
                                <option>价格从低到高</option>
                                <option>价格从高到低</option>
                                <option>销量优先</option>
                                <option>好评优先</option>
                            </select>
                            <div class="flex border border-gray-300 rounded">
                                <button class="px-3 py-2 text-gray-600 hover:bg-gray-50">
                                    <i class="fas fa-th"></i>
                                </button>
                                <button class="px-3 py-2 text-gray-600 hover:bg-gray-50 border-l border-gray-300">
                                    <i class="fas fa-list"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 商品网格 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <!-- 商品卡片 1 - 日本SK-II -->
                    <div class="bg-white rounded-lg shadow-lg overflow-hidden product-card-hover fade-in">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1586495777744-4413f21062fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="SK-II神仙水" class="w-full h-48 object-cover">
                            <div class="absolute top-2 left-2">
                                <span class="bg-red-500 text-white px-2 py-1 rounded text-xs font-medium">热销</span>
                            </div>
                            <div class="absolute top-2 right-2">
                                <img src="https://flagcdn.com/w40/jp.png" alt="日本" class="country-flag">
                            </div>
                            <div class="absolute bottom-2 left-2">
                                <span class="compliance-badge">
                                    <i class="fas fa-shield-alt"></i>合规进口
                                </span>
                            </div>
                        </div>
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-900 mb-2">SK-II 神仙水精华液</h3>
                            <p class="text-sm text-gray-600 mb-3">230ml 日本原装进口 · 保税仓发货</p>
                            <div class="flex items-center mb-3">
                                <div class="flex text-yellow-400 text-sm">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                                <span class="text-sm text-gray-500 ml-2">(1,234)</span>
                            </div>
                            <div class="flex items-center justify-between mb-3">
                                <div>
                                    <span class="text-lg font-bold text-red-600">¥1,299</span>
                                    <span class="text-sm text-gray-500 line-through ml-2">¥1,599</span>
                                </div>
                                <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">19% OFF</span>
                            </div>
                            <div class="text-xs text-gray-500 mb-3">
                                <i class="fas fa-shipping-fast mr-1"></i>包邮包税 · <i class="fas fa-shield-alt mr-1"></i>正品保障
                            </div>
                            <button onclick="addToCart(1)" class="w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition-colors btn-bounce">
                                加入购物车
                            </button>
                        </div>
                    </div>

                    <!-- 商品卡片 2 - 韩国面膜 -->
                    <div class="bg-white rounded-lg shadow-lg overflow-hidden product-card-hover fade-in">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="韩国面膜" class="w-full h-48 object-cover">
                            <div class="absolute top-2 left-2">
                                <span class="bg-green-500 text-white px-2 py-1 rounded text-xs font-medium">新品</span>
                            </div>
                            <div class="absolute top-2 right-2">
                                <img src="https://flagcdn.com/w40/kr.png" alt="韩国" class="country-flag">
                            </div>
                            <div class="absolute bottom-2 left-2">
                                <span class="compliance-badge">
                                    <i class="fas fa-shield-alt"></i>合规进口
                                </span>
                            </div>
                        </div>
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-900 mb-2">Dr.Jart+ 药丸面膜套装</h3>
                            <p class="text-sm text-gray-600 mb-3">10片装 韩国直邮 · 多种功效</p>
                            <div class="flex items-center mb-3">
                                <div class="flex text-yellow-400 text-sm">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="far fa-star"></i>
                                </div>
                                <span class="text-sm text-gray-500 ml-2">(856)</span>
                            </div>
                            <div class="flex items-center justify-between mb-3">
                                <div>
                                    <span class="text-lg font-bold text-red-600">¥199</span>
                                    <span class="text-sm text-gray-500 line-through ml-2">¥299</span>
                                </div>
                                <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">33% OFF</span>
                            </div>
                            <div class="text-xs text-gray-500 mb-3">
                                <i class="fas fa-shipping-fast mr-1"></i>包邮包税 · <i class="fas fa-shield-alt mr-1"></i>正品保障
                            </div>
                            <button onclick="addToCart(2)" class="w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition-colors btn-bounce">
                                加入购物车
                            </button>
                        </div>
                    </div>

                    <!-- 商品卡片 3 - 德国保健品 -->
                    <div class="bg-white rounded-lg shadow-lg overflow-hidden product-card-hover fade-in">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1556228578-8c89e6adf883?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="德国保健品" class="w-full h-48 object-cover">
                            <div class="absolute top-2 left-2">
                                <span class="bg-orange-500 text-white px-2 py-1 rounded text-xs font-medium">推荐</span>
                            </div>
                            <div class="absolute top-2 right-2">
                                <img src="https://flagcdn.com/w40/de.png" alt="德国" class="country-flag">
                            </div>
                            <div class="absolute bottom-2 left-2">
                                <span class="compliance-badge">
                                    <i class="fas fa-shield-alt"></i>合规进口
                                </span>
                            </div>
                        </div>
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-900 mb-2">双心 大蒜精胶囊</h3>
                            <p class="text-sm text-gray-600 mb-3">480粒 德国原装 · 降血脂</p>
                            <div class="flex items-center mb-3">
                                <div class="flex text-yellow-400 text-sm">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                </div>
                                <span class="text-sm text-gray-500 ml-2">(642)</span>
                            </div>
                            <div class="flex items-center justify-between mb-3">
                                <div>
                                    <span class="text-lg font-bold text-red-600">¥399</span>
                                    <span class="text-sm text-gray-500 line-through ml-2">¥499</span>
                                </div>
                                <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">20% OFF</span>
                            </div>
                            <div class="text-xs text-gray-500 mb-3">
                                <i class="fas fa-shipping-fast mr-1"></i>包邮包税 · <i class="fas fa-shield-alt mr-1"></i>正品保障
                            </div>
                            <button onclick="addToCart(3)" class="w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition-colors btn-bounce">
                                加入购物车
                            </button>
                        </div>
                    </div>

                    <!-- 商品卡片 4 - 澳洲奶粉 -->
                    <div class="bg-white rounded-lg shadow-lg overflow-hidden product-card-hover fade-in">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1563636619-e9143da7973b?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="澳洲奶粉" class="w-full h-48 object-cover">
                            <div class="absolute top-2 left-2">
                                <span class="bg-pink-500 text-white px-2 py-1 rounded text-xs font-medium">妈妈优选</span>
                            </div>
                            <div class="absolute top-2 right-2">
                                <img src="https://flagcdn.com/w40/au.png" alt="澳大利亚" class="country-flag">
                            </div>
                            <div class="absolute bottom-2 left-2">
                                <span class="compliance-badge">
                                    <i class="fas fa-shield-alt"></i>合规进口
                                </span>
                            </div>
                        </div>
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-900 mb-2">A2 白金版婴幼儿奶粉</h3>
                            <p class="text-sm text-gray-600 mb-3">3段 900g 澳洲直邮 · 保税仓</p>
                            <div class="flex items-center mb-3">
                                <div class="flex text-yellow-400 text-sm">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                                <span class="text-sm text-gray-500 ml-2">(1,567)</span>
                            </div>
                            <div class="flex items-center justify-between mb-3">
                                <div>
                                    <span class="text-lg font-bold text-red-600">¥268</span>
                                    <span class="text-sm text-gray-500 line-through ml-2">¥328</span>
                                </div>
                                <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">18% OFF</span>
                            </div>
                            <div class="text-xs text-gray-500 mb-3">
                                <i class="fas fa-shipping-fast mr-1"></i>包邮包税 · <i class="fas fa-shield-alt mr-1"></i>正品保障
                            </div>
                            <button onclick="addToCart(4)" class="w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition-colors btn-bounce">
                                加入购物车
                            </button>
                        </div>
                    </div>

                    <!-- 商品卡片 5 - 法国香水 -->
                    <div class="bg-white rounded-lg shadow-lg overflow-hidden product-card-hover fade-in">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1523293182086-1a55a4d1d5d1?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="法国香水" class="w-full h-48 object-cover">
                            <div class="absolute top-2 left-2">
                                <span class="bg-purple-500 text-white px-2 py-1 rounded text-xs font-medium">奢华</span>
                            </div>
                            <div class="absolute top-2 right-2">
                                <img src="https://flagcdn.com/w40/fr.png" alt="法国" class="country-flag">
                            </div>
                            <div class="absolute bottom-2 left-2">
                                <span class="compliance-badge">
                                    <i class="fas fa-shield-alt"></i>合规进口
                                </span>
                            </div>
                        </div>
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-900 mb-2">Chanel No.5 香水</h3>
                            <p class="text-sm text-gray-600 mb-3">50ml 法国原装 · 经典香氛</p>
                            <div class="flex items-center mb-3">
                                <div class="flex text-yellow-400 text-sm">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="far fa-star"></i>
                                </div>
                                <span class="text-sm text-gray-500 ml-2">(756)</span>
                            </div>
                            <div class="flex items-center justify-between mb-3">
                                <div>
                                    <span class="text-lg font-bold text-red-600">¥899</span>
                                    <span class="text-sm text-gray-500 line-through ml-2">¥1,199</span>
                                </div>
                                <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">25% OFF</span>
                            </div>
                            <div class="text-xs text-gray-500 mb-3">
                                <i class="fas fa-shipping-fast mr-1"></i>包邮包税 · <i class="fas fa-shield-alt mr-1"></i>正品保障
                            </div>
                            <button onclick="addToCart(5)" class="w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition-colors btn-bounce">
                                加入购物车
                            </button>
                        </div>
                    </div>

                    <!-- 商品卡片 6 - 美国维生素 -->
                    <div class="bg-white rounded-lg shadow-lg overflow-hidden product-card-hover fade-in">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="美国维生素" class="w-full h-48 object-cover">
                            <div class="absolute top-2 left-2">
                                <span class="bg-blue-500 text-white px-2 py-1 rounded text-xs font-medium">健康</span>
                            </div>
                            <div class="absolute top-2 right-2">
                                <img src="https://flagcdn.com/w40/us.png" alt="美国" class="country-flag">
                            </div>
                            <div class="absolute bottom-2 left-2">
                                <span class="compliance-badge">
                                    <i class="fas fa-shield-alt"></i>合规进口
                                </span>
                            </div>
                        </div>
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-900 mb-2">GNC 复合维生素</h3>
                            <p class="text-sm text-gray-600 mb-3">180粒 美国原装 · 增强免疫力</p>
                            <div class="flex items-center mb-3">
                                <div class="flex text-yellow-400 text-sm">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                </div>
                                <span class="text-sm text-gray-500 ml-2">(423)</span>
                            </div>
                            <div class="flex items-center justify-between mb-3">
                                <div>
                                    <span class="text-lg font-bold text-red-600">¥159</span>
                                    <span class="text-sm text-gray-500 line-through ml-2">¥199</span>
                                </div>
                                <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">20% OFF</span>
                            </div>
                            <div class="text-xs text-gray-500 mb-3">
                                <i class="fas fa-shipping-fast mr-1"></i>包邮包税 · <i class="fas fa-shield-alt mr-1"></i>正品保障
                            </div>
                            <button onclick="addToCart(6)" class="w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition-colors btn-bounce">
                                加入购物车
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 分页 -->
                <div class="flex justify-center mt-8">
                    <nav class="flex items-center space-x-2">
                        <button class="px-3 py-2 text-gray-500 hover:text-gray-700 disabled:opacity-50" disabled>
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <button class="px-4 py-2 bg-purple-600 text-white rounded-lg">1</button>
                        <button class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">2</button>
                        <button class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">3</button>
                        <button class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">4</button>
                        <button class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">5</button>
                        <button class="px-3 py-2 text-gray-500 hover:text-gray-700">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <!-- 合规信息弹窗 -->
    <div id="compliance-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-2xl w-full max-h-screen overflow-y-auto">
            <div class="p-6">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-2xl font-bold text-gray-900">跨境购买政策说明</h2>
                    <button onclick="closeComplianceModal()" class="text-gray-400 hover:text-gray-600">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
                
                <div class="space-y-6">
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                        <h3 class="font-semibold text-blue-900 mb-2">购买限额政策</h3>
                        <ul class="text-sm text-blue-800 space-y-1">
                            <li>• 单笔订单限额：人民币5,000元</li>
                            <li>• 年度个人限额：人民币26,000元</li>
                            <li>• 超过限额将无法完成清关</li>
                        </ul>
                    </div>

                    <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                        <h3 class="font-semibold text-green-900 mb-2">商品合规保障</h3>
                        <ul class="text-sm text-green-800 space-y-1">
                            <li>• 所有商品均已通过海关备案</li>
                            <li>• 符合中国进口商品检验检疫要求</li>
                            <li>• 商品包装贴有中文标签</li>
                            <li>• 按照跨境电商综合税率征税</li>
                        </ul>
                    </div>

                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                        <h3 class="font-semibold text-yellow-900 mb-2">身份信息要求</h3>
                        <ul class="text-sm text-yellow-800 space-y-1">
                            <li>• 需要提供真实有效的身份信息</li>
                            <li>• 身份信息仅用于海关清关申报</li>
                            <li>• 我们将严格保护您的个人信息安全</li>
                        </ul>
                    </div>

                    <div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
                        <h3 class="font-semibold text-purple-900 mb-2">售后服务</h3>
                        <ul class="text-sm text-purple-800 space-y-1">
                            <li>• 支持7天无理由退货（部分商品除外）</li>
                            <li>• 提供正品保障和假一赔十承诺</li>
                            <li>• 专业的跨境售后服务团队</li>
                        </ul>
                    </div>
                </div>

                <div class="mt-6 flex justify-end">
                    <button onclick="closeComplianceModal()" class="bg-purple-600 text-white px-6 py-2 rounded-lg hover:bg-purple-700 transition-colors">
                        我已了解
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 浮动购物车 -->
    <div class="floating-cart" onclick="showCart()">
        <i class="fas fa-shopping-cart text-xl"></i>
        <span id="floating-cart-count" class="cart-count">0</span>
    </div>

    <script>
        // 主题切换功能
        const themeToggle = document.getElementById('theme-toggle');
        const body = document.body;
        
        // 检查系统主题偏好
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            body.classList.add('dark-mode');
            themeToggle.innerHTML = '<i class="fas fa-sun text-xl"></i>';
        }
        
        themeToggle.addEventListener('click', () => {
            body.classList.toggle('dark-mode');
            if (body.classList.contains('dark-mode')) {
                themeToggle.innerHTML = '<i class="fas fa-sun text-xl"></i>';
            } else {
                themeToggle.innerHTML = '<i class="fas fa-moon text-xl"></i>';
            }
        });

        // 购物车功能
        let cart = JSON.parse(localStorage.getItem('cart')) || [];
        let cartCount = cart.reduce((sum, item) => sum + item.quantity, 0);

        function updateCartCount() {
            const cartCountElement = document.getElementById('cart-count');
            const floatingCartCountElement = document.getElementById('floating-cart-count');
            
            cartCountElement.textContent = cartCount;
            floatingCartCountElement.textContent = cartCount;
            
            // 添加动画效果
            if (cartCount > 0) {
                cartCountElement.classList.add('cart-badge');
                floatingCartCountElement.classList.add('cart-badge');
                setTimeout(() => {
                    cartCountElement.classList.remove('cart-badge');
                    floatingCartCountElement.classList.remove('cart-badge');
                }, 500);
            }
            
            // 保存到本地存储
            localStorage.setItem('cart', JSON.stringify(cart));
        }

        function addToCart(productId) {
            // 模拟商品数据
            const products = {
                1: { id: 1, name: 'SK-II 神仙水精华液', price: 1299, image: 'https://images.unsplash.com/photo-1586495777744-4413f21062fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80' },
                2: { id: 2, name: 'Dr.Jart+ 药丸面膜套装', price: 199, image: 'https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80' },
                3: { id: 3, name: '双心 大蒜精胶囊', price: 399, image: 'https://images.unsplash.com/photo-1556228578-8c89e6adf883?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80' },
                4: { id: 4, name: 'A2 白金版婴幼儿奶粉', price: 268, image: 'https://images.unsplash.com/photo-1563636619-e9143da7973b?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80' },
                5: { id: 5, name: 'Chanel No.5 香水', price: 899, image: 'https://images.unsplash.com/photo-1523293182086-1a55a4d1d5d1?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80' },
                6: { id: 6, name: 'GNC 复合维生素', price: 159, image: 'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80' }
            };

            const product = products[productId];
            if (product) {
                const existingItem = cart.find(item => item.id === productId);
                if (existingItem) {
                    existingItem.quantity += 1;
                } else {
                    cart.push({ ...product, quantity: 1 });
                }
                cartCount++;
                updateCartCount();
                showNotification('商品已添加到购物车！');
            }
        }

        function showNotification(message) {
            const notification = document.createElement('div');
            notification.className = 'fixed top-20 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
            notification.innerHTML = `
                <div class="flex items-center space-x-2">
                    <i class="fas fa-check-circle"></i>
                    <span>${message}</span>
                </div>
            `;
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.remove();
            }, 3000);
        }

        function showCart() {
            // 跳转到购物车页面
            window.location.href = 'shopping-cart/index.html';
        }

        function showComplianceModal() {
            document.getElementById('compliance-modal').classList.remove('hidden');
        }

        function closeComplianceModal() {
            document.getElementById('compliance-modal').classList.add('hidden');
        }

        // 点击弹窗外部关闭弹窗
        document.getElementById('compliance-modal').addEventListener('click', (e) => {
            if (e.target.id === 'compliance-modal') {
                closeComplianceModal();
            }
        });

        // 为购物车按钮添加点击事件
        document.getElementById('cart-btn').addEventListener('click', showCart);

        // 初始化购物车数量
        updateCartCount();

        // 添加滚动动画
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('fade-in');
                }
            });
        }, observerOptions);

        // 观察所有商品卡片
        document.querySelectorAll('.product-card-hover').forEach(card => {
            observer.observe(card);
        });

        // 添加分类点击事件
        document.querySelectorAll('.category-badge').forEach(category => {
            category.addEventListener('click', function() {
                // 移除其他选中状态
                document.querySelectorAll('.category-badge').forEach(c => {
                    c.classList.remove('bg-purple-100', 'text-purple-800');
                });
                // 添加选中状态
                this.classList.add('bg-purple-100', 'text-purple-800');
            });
        });

        // 添加合规政策链接点击事件
        const complianceButton = document.querySelector('button[onclick="showComplianceModal()"]');
        if (complianceButton) {
            complianceButton.addEventListener('click', showComplianceModal);
        }
    </script>
</body>
</html>